<template>
    <div class="pack">
        <div class="tree_container">
            <h3>机构列表</h3>
            <div class="treePack">
                <Tree :data="organizationTreeData" @on-select-change="organizationTreeChange"></Tree>
            </div>
        </div>
        <div class="detail_container">
            <h3>火警任务</h3>
            <div class="hunttool">
                <Select v-model="searchDatalist.taskListType" clearable  @on-change="searchTaskListType" placeholder="选择任务类型" size="small" style="width:150px;float: left;margin-right: 6px;">
                    <Option v-for="item in taskListTypeData" :value="item.value" :key="item.value" >{{item.value }}</Option>
                </Select>
                <Button type="primary" icon="ios-search" size="small" @click="searchData">查询</Button>
            </div>
            <div class="compile">
                <Table stripe border :columns="columns" :data="tabledata" ></Table>
            </div>
            <div class="page_container">
                <Page :current="pageNo" :total="totalCount" size="small" simple class="page_btn"
                      @on-change="pageChange"></Page>
                <P class="page_text">共{{totalCount}}条</P>
            </div>

            <!--查看-->
            <Modal v-model="addduty1" title="查看任务单" :closable="false" :mask-closable="false" width="800">
                <!--startprint-->
                <div id="printText">
                    <h2 style="text-align: center;">{{formValidate.taskListType}}</h2>
                    <ul class="tasklistul" v-if="isTaskList.taskList1">
                        <li>
                            <div style="display: inline-block;width: 49%"><P><span class="phead">接警时间：</span>{{formValidate.vaildTime}}</P></div>
                            <div style="display: inline-block;width: 49%"><P><span class="phead">报警电话：</span>{{formValidate.alarmPhone}}</P></div>
                        </li>
                        <li><P><span class="phead">气象信息：</span>{{formValidate.weather}}</P></li>
                        <li><P><span class="phead">火灾地点：</span>{{formValidate.fireAddress}}</P></li>
                        <li><P><span class="phead">火灾类型：</span>{{formValidate.fireType}}</P></li>
                        <li><P><span class="phead">出动车辆：</span>{{formValidate.useTruck}}</P></li>
                        <li><P><span class="phead">现场处置情况：</span>{{formValidate.localeSituation}}</P></li>
                    </ul>
                    <ul class="tasklistul" v-if="isTaskList.taskList2">
                        <li>
                            <div style="display: inline-block;width: 49%"><P><span class="phead">接警时间：</span>{{formValidate.vaildTime}}</P></div>
                            <div style="display: inline-block;width: 49%"><P><span class="phead">报警电话：</span>{{formValidate.alarmPhone}}</P></div>
                        </li>
                        <li><P><span class="phead">气象信息：</span>{{formValidate.weather}}</P></li>
                        <li><P><span class="phead">救援地点：</span>{{formValidate.rescueLocation}}</P></li>
                        <li><P><span class="phead">救援类型：</span>{{formValidate.rescueType}}</P></li>
                        <li><P><span class="phead">出动车辆：</span>{{formValidate.useTruck}}</P></li>
                        <li><P><span class="phead">现场处置情况：</span>{{formValidate.localeSituation}}</P></li>
                    </ul>
                    <ul class="tasklistul" v-if="isTaskList.taskList3">
                        <li>
                            <div style="display: inline-block;width: 49%"><P><span class="phead">调度时间：</span>{{formValidate.vaildTime}}</P></div>
                            <div style="display: inline-block;width: 49%"><P><span class="phead">调度电话：</span>{{formValidate.alarmPhone}}</P></div>
                        </li>
                        <li><P><span class="phead">气象信息：</span>{{formValidate.weather}}</P></li>
                        <li><P><span class="phead">监护地点：</span>{{formValidate.custodyPlace}}</P></li>
                        <li><P><span class="phead">监护类型：</span>{{formValidate.custodyType}}</P></li>
                        <li><P><span class="phead">出动车辆：</span>{{formValidate.useTruck}}</P></li>
                        <li><P><span class="phead">现场处置情况：</span>{{formValidate.localeSituation}}</P></li>
                    </ul>
                    <ul class="tasklistul" v-if="isTaskList.taskList4">
                        <li><P><span class="phead">通知时间：</span>{{formValidate.vaildTime}}</P></li>
                        <li><P><span class="phead">会议通知人：</span>{{formValidate.conferenceNotifier}}</P></li>
                        <li><P><span class="phead">会议地点：</span>{{formValidate.conferencePlace}}</P></li>
                        <li><P><span class="phead">会议内容及相关要求：</span>{{formValidate.conferenceContent}}</P></li>
                        <li><P><span class="phead">参加人员：</span>{{formValidate.attendee}}</P></li>
                    </ul>
                    <ul class="tasklistul" v-if="isTaskList.taskList5">
                        <li><P><span class="phead">通知时间：</span>{{formValidate.vaildTime}}</P></li>
                        <li><P><span class="phead">任务发布人：</span>{{formValidate.taskPublisher}}</P></li>
                        <li><P><span class="phead">任务接收人：</span>{{formValidate.taskSendee}}</P></li>
                        <li><P><span class="phead">任务内容：</span>{{formValidate.taskContent}}</P></li>
                        <li><P><span class="phead">注意事项：</span>{{formValidate.attention}}</P></li>
                    </ul>
                </div>
                <!--endprint-->
                <div slot="footer">
                    <Button type="ghost" @click="compileCancel()">关闭</Button>
                    <Button type="primary" @click="taskListPrintTask()">打印</Button>
                </div>
            </Modal>
        </div>
    </div>
</template>
<script type="text/javascript">
    var ezjsUtil = Vue.ezjsUtil;
    var apiConstants = ezjsUtil.constants.api;
    export default {
        components: {},
        data() {
            const validatevaildTime = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请选择日期'));
                } else {
                    callback();
                }
            };
            return {
                departmentName:CURRENT_LEADER.departmentName,  //登录人员机构名
                oneselfdepartmentCode:CURRENT_LEADER.departmentCode,  //登录人员机构code值
                searchdepartmentCode:'',
                loading1:false,
                loading2:false,
                showStamp:"",  //打印按钮
                //任务单类型下拉
                taskListTypeData:'',
                fireAddressData:'',
                fireTypeData:'',
                rescueAddressData:'',
                rescueTypeData:'',
                custodyAddressData:'',
                custodyTypeData:'',
                //二级机构code
                codeForTask:'',
                //任务单类型表
                isTaskList:{
                    taskList1:true,
                    taskList2:false,
                    taskList3:false,
                    taskList4:false,
                    taskList5:false,
                },
                //机构树
                organizationTreeData:[],
                //新增值班显示
                addduty: false,
                addduty1: false,
                conditionModal: false,
                //记录批量删除id
                compiledele: "",
                //当前页
                pageNo: 1,
                //总共多少页
                totalPage: '',
                //表格总共记录数
                totalCount: 0,
                searchDatalist:{
                    taskListType:'',
                },
                //表格头部信息
                columns: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '接收单位',
                        key: 'departmentName',
                        align: 'center',
                    },
                    {
                        title: '任务类型',
                        key: 'taskListType',
                        align: 'center',
                    },
                    {
                        title: '发布日期',
                        key: 'publishTime',
                        align: 'center',
                    },
                    {
                        title: '出警日期',
                        key: 'modifyTime',
                        align: 'center',
                        render: function (h, params) {
                            //个位补零
                            function digitZero(number){
                                if(number<10){
                                    number='0'+number;
                                }
                                return number;
                            };
                            const row = params.row;
                            var newTime = new Date(params.row.modifyTime);
                            var yyyy = newTime.getFullYear();
                            var MM = digitZero(newTime.getMonth() + 1);
                            var dd = digitZero(newTime.getDate());
                            var hh = digitZero(newTime.getHours());
                            var mm = digitZero(newTime.getMinutes());
                            var ss = digitZero(newTime.getSeconds());
                            var time = yyyy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss;
                            time = row.vaild === -1 ? time : '';
                            return h('div', time);
                        }
                    },
                    {
                        title: '执行状态',
                        key: 'vaild',
                        align: 'center',
                        render: (h, params) => {
                            const row = params.row;
                            const color = row.vaild === -1 ? 'green' : row.vaild === 1 ? 'red' : 'blue';
                            const text = row.vaild === -1 ? '已接警' : row.vaild === 1 ? '未接警' : '接警中';
                            return h('Tag', {
                                props: {
                                    type: 'dot',
                                    color: color
                                }
                            }, text);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 220,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.formValidate.id=params.row.id;
                                            this.formValidate.taskListId=params.row.taskListId;
                                            this.showStamp=params.row.vaild;
                                            this.flipList_taskList_detail(params.row);
                                            this.taskListTypeChange(params.row.taskListType);
                                            this.addduty1=true;
                                        }
                                    }
                                }, '查看'),
                            ]);
                        }
                    }
                ],
                //表格数据
                tabledata: [],
                //新增表单
                formValidate: {
                    id:'',
                    taskListId:'',
                    departmentNameForTask:'',
                    departmentCodeForTask:'',
                    departmentName1:[],
                    vaildTime:'',       //接警时间/通知时间
                    alarmPhone:'',      //接警电话
                    fireAddress:'',     //火灾地点
                    fireType:'',        //火灾类型
                    weather:'',     //气象信息
                    rescueLocation:'',      //救援地点
                    rescueType:'',      //救援类型
                    custodyPlace:'',        //监护地点
                    custodyType:'',     //监护类型
                    conferenceNotifier:'',      //会议通知人
                    conferencePlace:'',     //会议地点
                    conferenceContent:'',       //会议内容
                    attendee:'',        //参加人员
                    taskPublisher:'',       //任务发起人
                    taskSendee:'',      //任务接收人
                    taskContent:'',     //任务内容
                    attention:'',       //注意事项
                    taskListType:'火警任务单',       //任务类别
                    useTruck:'',        //出动车辆
                    localeSituation:'',     //现场处置情况
                },

            }
        },
        computed: {},
        created() {
            this.searchdepartmentCode=this.oneselfdepartmentCode;
            this.flipList();
            this.organizationFlipList();
            this.dictionary_flipList_taskListType();
        },
        methods: {
            vaildTimeChange(date){
                this.formValidate.vaildTime = date;
            },
            //日期格式转换
            dateformatting(dateval) {
                var newTime = new Date(dateval);
                var yyyy = newTime.getFullYear();
                var MM = newTime.getMonth() + 1;
                var dd = newTime.getDate();
                var hh = newTime.getHours();
                var mm = newTime.getMinutes();
                var ss = newTime.getSeconds();
                var time = yyyy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss;
//                var time = yyyy + "-" + MM + "-" + dd;
                return time
            },
            //机构树点击事件
            organizationTreeChange(val){
                if(val.length>0 && val[0].code>=this.oneselfdepartmentCode){
                    this.searchdepartmentCode=val[0].code;
                }else {
                    this.searchdepartmentCode=this.oneselfdepartmentCode;
                }
                this.searchData();
            },
            //发送任务单位
            checkboxChange(val){
                var newarry=[];
                for(var i=0;i<val.length;i++){
                    newarry.push(this.codeForTask[i].departmentCode);
                }
                this.formValidate.departmentCodeForTask=newarry.join(',');
                this.formValidate.departmentNameForTask=this.formValidate.departmentName1.join(',');
            },
            //任务类型
            taskListTypeChange(val){
//                this.compileReset('formValidate')
                this.isTaskList.taskList1=false;
                this.isTaskList.taskList1=false;
                this.isTaskList.taskList2=false;
                this.isTaskList.taskList3=false;
                this.isTaskList.taskList4=false;
                this.isTaskList.taskList5=false;
                switch (val)
                {
                    case '火警任务单':
                        this.isTaskList.taskList1=true;
                        break;
                    case '救援任务单':
                        this.isTaskList.taskList2=true;
                        break;
                    case '生产监护任务单':
                        this.isTaskList.taskList3=true;
                        break;
                    case '会议通知单':
                        this.isTaskList.taskList4=true;
                        break;
                    case '战备任务通知单':
                        this.isTaskList.taskList5=true;
                        break;
                }
                this.formValidate.taskListType=val;
            },
            //查询
            searchData(){
                this.pageNo=1;
                this.flipList();
            },
            searchTaskListType(val){
                this.searchDatalist.taskListType=val;
            },

            //表单取消
            compileCancel() {
//                this.addduty=false;
                this.addduty1=false;
//                this.compileReset('formValidate');
            },

            //表单重置
            compileReset(name) {
                this.$refs[name].resetFields();
            },

            //分页改变时
            pageChange(val) {
                if (val <= this.totalPage) {
                    this.pageNo = val;
                    this.flipList();
                }
            },

            preview(){
            },

    //查询列表
            flipList() {
                var _this = this;
                ezjsUtil.request(apiConstants.taskList_flipListByDepartmentCode,
                    {
                        taskListType:_this.searchDatalist.taskListType,
                        departmentCode:_this.searchdepartmentCode,
                        pageNo: _this.pageNo
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.tabledata = data.listInfo;
                        _this.totalCount = data.flipInfo.totalCount;
                        _this.totalPage = data.flipInfo.totalPage;
                    }
                )
            },
            //查询主表详情信息
            flipList_taskList_detail(val) {
                var _this = this;
                ezjsUtil.request(apiConstants.taskList_detail,
                    {
                        taskListId:val.taskListId
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.formValidate.departmentNameForTask=data.departmentNameForTask;
                        _this.formValidate.departmentCodeForTask=data.departmentCodeForTask;
                        _this.formValidate.departmentName=data.departmentName;
                        _this.formValidate.departmentCode=data.departmentCode;
                        _this.formValidate.vaildTime=data.vaildTime;
                        _this.formValidate.alarmPhone=data.alarmPhone;
                        _this.formValidate.fireAddress=data.fireAddress;
                        _this.formValidate.fireType=data.fireType;
                        _this.formValidate.weather=data.weather;
                        _this.formValidate.rescueLocation=data.rescueLocation;
                        _this.formValidate.rescueType=data.rescueType;
                        _this.formValidate.custodyPlace=data.custodyPlace;
                        _this.formValidate.custodyType=data.custodyType;
                        _this.formValidate.conferenceNotifier=data.conferenceNotifier;
                        _this.formValidate.conferencePlace=data.conferencePlace;
                        _this.formValidate.conferenceContent=data.conferenceContent;
                        _this.formValidate.attendee=data.attendee;
                        _this.formValidate.taskPublisher=data.taskPublisher;
                        _this.formValidate.taskSendee=data.taskSendee;
                        _this.formValidate.taskContent=data.taskContent;
                        _this.formValidate.attention=data.attention;
                        _this.formValidate.taskListType=data.taskListType;
                        _this.formValidate.useTruck=data.useTruck;
                        _this.formValidate.localeSituation=data.localeSituation;
                    }
                )
            },
            taskListPrintTask() {
/*                if (!!window.ActiveXObject || "ActiveXObject" in window){
                    console.log(111);
                }else {
                    jQuery('#printText').print();
                }*/
                jQuery('#printText').print();
                var _this = this;
                ezjsUtil.request(apiConstants.taskList_printTask,
                    {
                        id:this.formValidate.id,
                        taskListId:this.formValidate.taskListId
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.addduty1=false;
                        _this.flipList();
                        _this.organizationFlipList();
                    }
                )
            },

            //获取所有组织机构树
            organizationFlipList() {
                var _this = this;
                ezjsUtil.request(apiConstants.organization_flipList,
                    { },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.organizationTreeData=data;
                        _this.organizationTreeData[0].expand=true;
                    }
                )
            },
            /*字典数据相关接口*/
            dictionary_flipList_taskListType() { //查询火警任务单
                var _this = this;
                ezjsUtil.request(apiConstants.dictionary_flipList,
                    {
                        key: "taskListType",
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.taskListTypeData = data;
                    }
                )
            },

        },
        mounted() {
        }
    }
</script>
<style lang="less" scoped>
    .pack {
        width: 100%;
        height: 100%;
    }

    .tree_container {
        width: 260px;
        height: 100%;
        float: left;
        border: 1px solid #d3d8e0;

    h3 {
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #6e6d6d;
    }
    .treePack{
        height: 94%;
        padding: 10px;
        overflow: auto;
    }
    }
    .detail_container {
        height: 100%;
        margin-left: 280px;
        overflow: hidden;
        overflow-y: auto;
    }

    h3 {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #d3d8e0;
    }

    .hunttool, .hunttoolreturn {
        height: 54px;
        padding: 15px 0;

    .addbtn {
        margin-right: 6px;
        float: right;
    }

    .deltebtn {
        margin-right: 6px;
        float: right;
    }

    }
    .hunt {
        width: 14rem;
    }

    .page_container {
        height: 30px;
        margin-top: 20px;

    .page_btn {
        float: right;
    }

    .page_text {
        float: right;
        line-height: 26px;
    }

    }

    .right-card {
        margin-bottom: 20px;
    }

    .tasklistul{
        border: 1px solid #ccc;
        font-size: 14px;
        margin: 30px 20px;
        color: #535353;
        li{
            border-bottom: 1px solid #ccc;
            padding: 18px 40px;
        }
        .phead{
            color: #131313;
        }
    }
</style>